import React, { useRef, useState } from "react";
import { useModel } from "@umijs/max";
import { Space, Tabs, Form, Button, Input, Select, message } from "antd";
import ActivityManageTable from "./ActivityManageTable";
import { useComponentDidMount } from "@/hooks";
import ActivityUpdate from "../modals/ActivityUpdate";
import { PlusOutlined } from "@ant-design/icons";
import { activityTypes } from "@/constants/types";
import { addActivity, updateActivity } from '../services';
import { useRequest } from "ahooks";

// 切换tab需要刷新的tab
const tabChangeShouldUpdateTab: string [] = [];

const {Item} = Form;

const ActivityManage = () => {
  const allRef = useRef();
  const todoRef = useRef();
  const doingRef = useRef();
  const doneRef = useRef();
  const [form] = Form.useForm();
  const { getDict } = useModel('dictModel');
  const activityStatus = getDict('activityStatus');

  const {loading: addLoading, runAsync: addApi} = useRequest(addActivity, {manual: true});

  const [activeKey, setActiveKey] = useState<string>('all');
  const [tabNum, setTabNum] = useState<any>({all: 0, todo: 0, doing: 0, done: 0});

  const [searchValue, setSearchValue] = useState<Object>({});

  //
  const [visible, setVisible] = useState(false);

  const fetchTabNum = async () => {
    // const res = await fetchClueTabNum();
    const res = {};
    setTabNum({
      all:  0,
      todoNum:  0,
      doing:  0,
      doneNum:  0,
    });
  }


  const tabChange = (key: string) => {
    setActiveKey(key);  
  }

  const refreshNum = () => {
    fetchTabNum();
  }

  const search = () => {
    setTimeout(() => {
      const refObj = tabList.find(v => v.key === activeKey)?.comRef;
      refObj?.current?.refreshTable();
    }, 0)
  }

  const handleSearch = () => {
    const params = form.getFieldsValue();
    setSearchValue(params);
    refreshNum();
    search();
  }
  const handleReset = () => {
    form.resetFields();
    setSearchValue({});
    refreshNum();
    search();
  }

  const childrenProps: {refreshNum: any; activeKey: string; tabChangeShouldUpdateTab: string []; searchValue: any} = {
    refreshNum,
    activeKey,
    tabChangeShouldUpdateTab,
    searchValue,
  }

  const tabList: Array<any> = [
    {
      title: '全部',
      key: 'all',
      label: tabNum?.all > 0 ? `全部 ( ${ tabNum?.all} )` : '全部',
      comRef: allRef,
      children: <ActivityManageTable {...childrenProps} tabKey="all"  ref={allRef} />,
    },
    {
      title: '未开始',
      key: 'todo',
      label: tabNum?.todoNum > 0 ? `未开始 ( ${ tabNum?.todoNum} )` : '未开始',
      comRef: todoRef,
      children: <ActivityManageTable {...childrenProps} tabKey="todo"  ref={todoRef} />,
    },
    {
      title: '进行中',
      key: 'doing',
      label: tabNum?.doingNum > 0 ? `进行中 ( ${ tabNum?.doingNum} )` : '进行中',
      comRef: doingRef,
      children: <ActivityManageTable {...childrenProps} tabKey="doing" ref={doingRef} />,
    },
    {
      title: '已结束',
      key: 'done',
      label: tabNum?.doneNum > 0 ? `已结束 ( ${ tabNum?.doneNum} )` : '已结束',
      comRef: doneRef,
      children: <ActivityManageTable {...childrenProps} tabKey="done" ref={doneRef} />,
    }
  ];

  const activityUpdateProps = {
    title: '新增活动',
    visible,
    loading: addLoading,
    onCancel: () => {
      setVisible(false);
    },
    onSubmit: async (params: activityTypes) => {
      const res = await addApi(params);
      if (res.code === '0') {
        message.success('操作成功');
        activityUpdateProps.onCancel();
        search();
        fetchTabNum();
      }
    }
  }

  useComponentDidMount(() => {
    fetchTabNum();
  });
  
  return (
    <>
      <Form form={form} layout="inline">
        <Item name="name" label={"活动名称"}>
          <Input />
        </Item>
        <Item name="status" label={"活动状态"}>
          <Select style={{width: 150}} allowClear options={activityStatus} />
        </Item>
        <Space>
          <Button type="default" onClick={() => handleReset()}>重置</Button>
          <Button type="primary" onClick={() => handleSearch()}>查询</Button>
        </Space>
      </Form>
      <Tabs
        className="mt20"
        activeKey={activeKey}
        onChange={tabChange}
        tabBarExtraContent={{
          right: (
            <Space>
              <Button onClick={() => setVisible(true)} type="primary" icon={<PlusOutlined />}>新增活动</Button>
            </Space>
          )
        }} 
        items={tabList}
      />
      {visible && <ActivityUpdate {...activityUpdateProps} />}
    </>
  );
};


export default ActivityManage;